<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <link rel="stylesheet" href="../css/laydate.css">
    <link rel="stylesheet" href="../css/page.css">
    <style>

        .pageBody {
            display: flex;
            flex: 1;
        }
        .left {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .left > div {
            flex: 1;
            height: 50%;
        }
        .right {
            flex: 2;
            display: flex;
            flex-direction: column;
        }
        .topBox {
            flex: 3;
            display: flex;
            flex-direction: row;
            height: 30%;
        }
        .topBox > div {
            flex: 1;
        }
        .bottomBox {
            flex: 7;
            height: 70%;
        }

        /*舆情详情*/
        .customerSelect {
            padding: 0.5rem 1rem;
        }
        .btnGroup1 {
            margin-top: 10px;
        }
        .timeUstyle {
            background: transparent;
            border: 2px solid #00abde;
            width: 9rem;
            border-radius: 0.1rem;
            height: 28%;
            line-height: 28%;
        }
        .endTimeContent {
            margin-left: 5%;
        }
        /*修改输入框 placeholder字体颜色 start*/
        input:-moz-placeholder,
        textarea:-moz-placeholder {
            color: #fff;
            vertical-align: middle;
        }
        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #fff;
            vertical-align: middle;
        }
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #fff;
            vertical-align: middle;
        }
        /*修改输入框 placeholder字体颜色 END*/
        /*customerInformationList start*/
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        a {
            text-decoration: none;

        }

        /*查询*/
        .yuqingsearch{
            padding:0rem 2rem;
            background: #00abde;
            border: 2px solid #00abde;
            margin-top: 50%;
            border-radius: 0.1rem;
        }

        /*舆情详情 图片展示区*/
        .customerInformationList {
            position: relative;
            width: 100%;
            height: 75%;

        }
        .customerInformationList thead tr th{
            font-size: 0.8rem;
        }
        .leftBox {
            width: 100%;
            height: 19rem;
            overflow: auto;
        }

        /*舆情详情 输入框*/
        .customerInformation {
            width: 100%;
            height: 27%;
            padding: 1rem 0rem;
            border-bottom: 2px solid #00adef;
        }
        .customerInformationleft,.customerInformationmiddle{
            width: 33.33%;
            height: 100%;
        }
        /*下拉框宽度重新定义*/
        .mySelect{
            width: 9rem;
        }
        /*关键字输入框*/
        .gjz{
            width: 9rem;
            background: transparent;
            border: 2px solid #00abde;
            border-radius: 0.1rem;
        }
        /*市场预期概览tabel*/

        #table tbody tr td,#table1 thead tr th{
            width: 20%;
            text-align: center;
            font-size: 0.65rem;

        }
        /*最新资讯*/
        #informationBox1{
            width: 100%;
            height: 100%;
            margin: 0 auto;
            /*background: pink;*/
        }

        .myscroll1{
            width: 100%;
            height: 220px;
            /*border: 1px solid #000;*/
            overflow: hidden;
        }
        .myscroll1 li{
            list-style: none;
            height: 45px;
            line-height: 16px;
            margin-left: 20px;

        }
        .myscroll1 li a{
            font-size:0.8rem;
            color: #fff;
            text-decoration: none;
        }
        #informationBox1 li>a:hover{
            color:#006aa3;

        }

        /*图文展示*/

        .infomationContent {
            float: left;
            width: 100%;
            height: 100%;
        }
        .infomationContent > h2 > span {
            font-size: 1rem;
            font-weight: normal;
        }
        .infomationContent > ul > li {
            width: 100%;
            color: #756F71;
            padding: .1rem 0.1rem;
            font-size: 12px;
        }
        .infomationContent > ul > li > .pic {
            width: 16%;
            height: 16%;
            margin: 1%;
        }
        .infomationContent > ul > li > div > img {
            width: 100%;
            height: 100%;
            margin-left: 0.5rem;
        }
        .infomationContent > ul > li > p {
            width: 78%;
            padding: 0.2rem 0.2rem;
        }
        .infomationContent > ul > li > p > .neirong {
            margin: 0.1rem 0 0.5rem 0;
            color: #00b0f4;
            font-size: 0.8rem;
        }
        .infomationContent > ul > li > p > span {
            line-height: 1.3rem;
            display: inline-block;
            margin: 0 .5rem .5rem .5rem;
        }
        .bgi4 {
            background: url("../img/03_05shengyufengxian/lticn_eye.png") no-repeat left center;
            padding-left: 1rem;
            width: 0.6rem;
            background-size: contain;
        }
        .infomationContent > ul > li > p > a:first-child {
            display: block;
            font-size: 0.95rem;
            font-weight: bold;
            margin-bottom: 0.5rem   ;
        }
        .infomationContent > ul > li > p a {
            color: #fff;
        }
        /*分页样式*/
        .pageye{
            width: 100%;
            height: 30%;

        }
        .page{
            position: absolute;
            bottom: 5px;
        }
        .leftBox .kuaizhao a{
            color: orange;
        }

    </style>
</head>
<body id="text001" data-title="测试">
<div class="container">
    <h2 hidden>声誉风险</h2>
    <div class="pageBody">
        <div class="left">
            <div class="left-top">
                <div class="chartBox ec001">
                    <div class="chartTitle">
                        <h3>市场舆情概览</h3>
                    </div>
                    <div class="chartContent">
                        <div class="xialakuan">
                            <div class="inputGroup fr" style="margin-top: 0.2rem">
                                <label class="jiaoyishichang">交易市场:</label>&nbsp;&nbsp;
                                <div class="mySelect">
                                    <div class="myOption selected"><span class="text"></span><span class="icon"></span></div>
                                    <ul class="myOptionBox">
                                        <li class="myOption selected">青岛华银有限公司</li>
                                        <li class="myOption">青岛华银有限公司</li>
                                        <li class="myOption">青岛华银有限公司</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="chartBody">
                            <div id="ec_03_05shichangyuqinggailan"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-bottom">
                <div class="chartBox ec002">
                    <div class="customerSelect">
                        <div class="btnGroup btnGroup1">
                            <button class="active">纠纷客户名单</button>
                            <button>客户黑名单</button>
                        </div>
                    </div>
                    <div class="chartContent">
                        <table id="table1" align="center" width="100%">
                            <thead style="font-size: 0.8rem;">
                            <tr><th>时间</th><th>投诉人</th><th>投诉电话</th><th>投诉原因</th><th>查看详情</th>
                            </tr>
                            </thead>
                        </table>
                        <div style="overflow-x: auto; overflow-y: auto; height: 100%; width:100%;">
                            <table id="table" width="100%" height="100%">
                                <tbody>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                <tr><td>20180307</td><td>王建国</td><td>15888888888</td><td>交易市场</td><td class="more"><a href=""> 查看</a></td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="right">
            <div class="topBox">
                <!--实时舆情-->
                <div class="topBox1">
                    <div class="chartBox ec002">
                        <div class="chartTitle">
                            <h3>实时舆情</h3>
                        </div>
                        <div class="chartContent">
                            <div class="chartBody">
                                <div id="ec_shishiyuqing001"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--最新资讯-->
                <div class="topBox2">
                    <div class="chartBox ec002">
                        <div class="chartTitle">
                            <h3>最新资讯</h3>
                        </div>
                        <div class="chartContent">
                            <div id="informationBox1">
                                <div class="myscroll1">
                                    <ul>
                                        <li><a href="#68.html">用FlexSlider制作支付宝2013版幻灯片用FlexSlider制作支付宝2013版幻灯片2013版幻灯片用FlexSlider制作支付宝2013版幻灯片</a></li>
                                        <li><a href="#67.html">扁平化UI/Flat UI Kit(PSD)用FlexSlider制作支付宝2013版幻灯片发大幅度2013版幻灯片用FlexSlider制作支付宝2013版幻灯片</a></li>
                                        <li><a href="#66.html">童趣卡通圣诞老人矢量素材(EPS)用FlexSlider制作支付宝2013版幻灯片阿发的发2013版幻灯片用FlexSlider制作支付宝2013版幻灯片</a></li>
                                        <li><a href="#66.html">童趣卡通圣诞老人矢量素材(EPS)用FlexSlider制作支付宝2013版幻灯片阿发的发2013版幻灯片用FlexSlider制作支付宝2013版幻灯片</a></li>
                                        <li><a href="#66.html">童趣卡通圣诞老人矢量素材(EPS)用FlexSlider制作支付宝2013版幻灯片阿发的发2013版幻灯片用FlexSlider制作支付宝2013版幻灯片</a></li>
                                        <!--<li><a href="#65.html">63个线性图标素材(PSD)用FlexSlider制作支付宝2013版幻灯片阿发达啊</a></li>-->
                                        <!--<li><a href="#64.html">15个音乐类图标素材(AI)</a></li>-->
                                        <!--<li><a href="#63.html">jQuery侧边导航插件SidebarJS</a></li>-->
                                        <!--<li><a href="#62.html">jQuery计时器插件TimeCircles</a></li>-->
                                        <!--<li><a href="#61.html">jQuery仿Google Play幻灯片效果插件plusview</a></li>-->
                                        <!--<li><a href="#60.html">100个圣诞节矢量图标(PSD/SVG)</a></li>-->
                                        <!--<li><a href="#59.html">用FlexSlider制作《枪神纪》幻灯片效果</a></li>-->
                                        <!--<li><a href="#68.html">用FlexSlider制作支付宝2013版幻灯片</a></li>-->
                                        <!--<li><a href="#67.html">扁平化UI/Flat UI Kit(PSD)</a></li>-->
                                        <!--<li><a href="#66.html">童趣卡通圣诞老人矢量素材(EPS)</a></li>-->
                                        <!--<li><a href="#65.html">63个线性图标素材(PSD)</a></li>-->
                                        <!--<li><a href="#64.html">15个音乐类图标素材(AI)</a></li>-->
                                        <!--<li><a href="#63.html">jQuery侧边导航插件SidebarJS</a></li>-->
                                        <!--<li><a href="#62.html">jQuery计时器插件TimeCircles</a></li>-->
                                        <!--<li><a href="#61.html">jQuery仿Google Play幻灯片效果插件plusview</a></li>-->
                                        <!--<li><a href="#60.html">100个圣诞节矢量图标(PSD/SVG)</a></li>-->
                                        <!--<li><a href="#59.html">用FlexSlider制作《枪神纪》幻灯片效果</a></li>-->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右下侧部分  舆情详情-->
            <div class="bottomBox">
                <div class="chartBox ec002">
                    <div class="chartTitle">
                        <h3>舆情详情</h3>
                    </div>
                    <!--舆情详情-->
                    <div class="chartContent">
                        <div class="chartBody chartBody1">
                            <div class="customerInformation">
                                <div class="customerInformationleft fl">
                                    <div class="inputGroup fl">
                                        <label class="jiaoyishichang">交易市场:</label>&nbsp;&nbsp;
                                        <div class="mySelect" id="jiaoyishichang">
                                            <div class="myOption selected"><span class="text"></span><span class="icon"></span></div>
                                            <ul class="myOptionBox">
                                                <li class="myOption selected">青岛华银有限公司</li>
                                                <li class="myOption">青岛华银有限公司</li>
                                                <li class="myOption">青岛华银有限公司</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <div class="inputGroup fl">
                                        <label for="BeginTime">开始时间：</label>
                                        <input placeholder="请输入开始日期" id="BeginTime" class="laydate-icon timeUstyle stateUTime"
                                               onclick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})">
                                        <!--<input type="Date" id="BeginTime">-->
                                    </div>
                                </div>
                                <div class="customerInformationmiddle fl">
                                    <div class="inputGroup fl">
                                        <label class="guanjianzi">关键字:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="text" class="gjz" placeholder="青岛华银有限公司">

                                    </div>
                                    <br>
                                    <br>
                                    <div class="inputGroup fl">
                                        <label for="EndTime">结束时间：</label>
                                        <input placeholder="请输入开始日期" id="EndTime" class="laydate-icon timeUstyle stateUTime"
                                               onclick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})">
                                        <!--<input type="Date" id="EndTime">-->
                                    </div>
                                </div>
                                <div class="customerInformationright fl">

                                    <div class="inputGroup">
                                        <button class="yuqingsearch">查询</button>
                                    </div>
                                </div>
                            </div>
                            <div class="customerInformationList">
                                <div class="infomationContent fl">
                                    <ul class="leftBox">
                                        <li class="fl">
                                            <div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>
                                            <p class="fr">
                                                <a href="#">保监会启动偿二代二期工程建设</a>
                                                <span class="neirong">为进一步补齐制度短板和监管漏洞，提升保险风险管理贺风险抵御能力，保监会于近日印发&gt偿二代二期工程建设方案&lt（一下简称《建设方案》），启动偿二代二期工程建设。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source1">中国网</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">保监会、保险</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2014-02-19 12:26</span>
                                                <span class="fr kuaizhao"><a href="https://www.baidu.com/">快照</a></span>

                                            </p>
                                        </li>
                                        <li class="fl">
                                            <div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>
                                            <p class="fr">
                                                <a href="#">保监会启动偿二代二期工程建设</a>
                                                <span class="neirong">为进一步补齐制度短板和监管漏洞，提升保险风险管理贺风险抵御能力，保监会于近日印发&gt偿二代二期工程建设方案&lt（一下简称《建设方案》），启动偿二代二期工程建设。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source2">中国网</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">保监会、保险</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2014-02-19 12:26</span>
                                            </p>
                                        </li>
                                        <li class="fl">
                                            <div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>
                                            <p class="fr">
                                                <a href="#">保监会启动偿二代二期工程建设</a>
                                                <span class="neirong">为进一步补齐制度短板和监管漏洞，提升保险风险管理贺风险抵御能力，保监会于近日印发&gt偿二代二期工程建设方案&lt（一下简称《建设方案》），启动偿二代二期工程建设。</span>
                                                <span>来源:</span><a href="#" class="bgi1">中国网</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">保监会、保险</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2014-02-19 12:26</span>
                                            </p>
                                        </li>
                                        <li class="fl">
                                            <div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>
                                            <p class="fr">
                                                <a href="#">保监会启动偿二代二期工程建设</a>
                                                <span class="neirong">为进一步补齐制度短板和监管漏洞，提升保险风险管理贺风险抵御能力，保监会于近日印发&gt偿二代二期工程建设方案&lt（一下简称《建设方案》），启动偿二代二期工程建设。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source3">中国网</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">保监会、保险</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2014-02-19 12:26</span>
                                            </p>
                                        </li>
                                        <li class="fl">
                                            <div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>
                                            <p class="fr">
                                                <a href="#">保监会启动偿二代二期工程建设</a>
                                                <span class="neirong">为进一步补齐制度短板和监管漏洞，提升保险风险管理贺风险抵御能力，保监会于近日印发&gt偿二代二期工程建设方案&lt（一下简称《建设方案》），启动偿二代二期工程建设。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source4">中国网</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">保监会、保险</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2014-02-19 12:26</span>
                                            </p>
                                        </li>
                                        <li class="fl">
                                            <div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>
                                            <p class="fr">
                                                <a href="#">保监会启动偿二代二期工程建设</a>
                                                <span class="neirong">为进一步补齐制度短板和监管漏洞，提升保险风险管理贺风险抵御能力，保监会于近日印发&gt偿二代二期工程建设方案&lt（一下简称《建设方案》），启动偿二代二期工程建设。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source5">中国网</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">保监会、保险</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2014-02-19 12:26</span>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pageye fl">
                                    <ul class="page" maxshowpageitem="5" pagelistcount="10"  id="page"></ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/chartsCom.js"></script>
<script src="../js/pageCom.js"></script>
<script src="../js/laydate.js"></script>
<script src="../js/pagefenye.js"></script>
<script type="text/javascript">
    function tt(dd){
        //alert(dd);
    }
    var GG = {
        "kk":function(mm){
            // alert(mm);
        }
    }

    $("#pagefenye").initPage(71,1,GG.kk);

    $(function(){
        $('.myscroll1').myScroll({
            speed: 100, //数值越大，速度越慢
            rowHeight: 45 //li的高度
        });

    });
    // JavaScript Document
    (function($){
        $.fn.myScroll = function(options){
            //默认配置
            var defaults = {
                speed:1,  //滚动速度,值越大速度越慢
                rowHeight:45 //每行的高度
            };

            var opts = $.extend({}, defaults, options),intId = [];

            function marquee(obj, step){

                obj.find("ul").animate({
                    marginTop: '-=1'
                },0,function(){
                    var s = Math.abs(parseInt($(this).css("margin-top")));
                    if(s >= step){
                        $(this).find("li").slice(0, 1).appendTo($(this));
                        $(this).css("margin-top", 0);
                    }
                });
            }

            this.each(function(i){
                var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);

                _this.hover(function(){
                    clearInterval(intId[i]);
                },function(){
                    intId[i] = setInterval(function(){
                        if(_this.find("ul").height()<=_this.height()){
                            clearInterval(intId[i]);
                        }else{
                            marquee(_this, sh);
                        }
                    }, speed);
                });

            });

        }

    })(jQuery);

    //资讯

    var allCharts = [];
    $(function () {
        //市场舆情浏览 模块一
        var fxyq001 = echarts.init($("#ec_03_05shichangyuqinggailan")[0]);
        fxyq001.setOption(opt_pie);
        fxyq001.setOption({

            series: [
                {
                    name: '高管资质',
                    type: 'pie',
                    radius: '60%',
                    center: ['36%', '50%'],
                    data: [
                        {value: 10, name: '10年以上'},
                        {value: 14, name: '5-10年'},
                        {value: 16, name: '3年'},
                        {value: 18, name: '2年'},
                        {value: 22, name: '1年'}
                    ],
                    axisLabel: { //标签名称
                        fontSize: 11 * bodyScale
                    },

                }
            ]
        });
        //实时舆情
        var fxyq002 = echarts.init($("#ec_shishiyuqing001")[0]);
        fxyq002.setOption(opt_com);
        fxyq002.setOption(opt_line);
        fxyq002.setOption({
            legend: {
                show: false
            },
            grid: {
                top: '20%',
                left: '10%',
                right: '10%',
                bottom: '20%'
            },
            xAxis: {
                name: '日',
                // type: 'category',
                // boundaryGap: false,
                data: ['9-12', '9-13', '9-14', '9-15', '9-16', '9-17', '9-18', '9-19']
            },
            yAxis: {
                name: '热度值',
                type: 'value'

            },
            series: [
                {
                    name: '平均单笔贷款',
                    type: 'line',
                    symbol: 'circle',
                    data: [200, 255, 290, 320, 380, 430, 470, 490],
                    areaStyle: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: colors[0] // 0% 处的颜色
                            }, {
                                offset: 1, color: '#00adef11' // 100% 处的颜色
                            }]
                        }
                    }
                }

            ]
        });
        //当前时间
        //本页所有图表
        allCharts = [fxyq001, fxyq002];
    });


</script>
</body>
</html>
